<template>
    <div class="con">
        <div class="header">
            <img src="../../assets/images/my/headercard.png" alt class="bg">
            <div class="btn" @click="login()" v-show="showlogin">
                <button>登录/注册</button>
            </div>
            <div class="personinfo" v-show="!showlogin" @click="personinfo()">
                <dl>
                    <dt class="fl">
                        <img src="../../assets/images/my/head.png" alt class="head">
                    </dt>
                    <dt class="fl">
                        <p>{{accountName}} ({{phone}})</p>
                        <span>
                            <img src="../../assets/images/my/head1.png" alt>
                            普通用户
                        </span>
                    </dt>
                    <img src="../../assets/images/more3.png" alt class="more3">
                </dl>
            </div>
            <div class="nav">
                <ul>
                    <li @click="tradeRecord()">
                        <img src="../../assets/images/my/icon1.png" alt>
                        <p>交易记录</p>
                    </li>
                    <li @click="mycard()">
                        <img src="../../assets/images/my/icon2.png" alt>
                        <p>我的银行卡</p>
                    </li>
                    <li>
                        <img src="../../assets/images/my/icon3.png" alt>
                        <p>VIP会员</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="info">
            <div class="content" @click="myBackPlan()">
                <img src="../../assets/images/my/plan.png" alt class="icon">
                <p>还卡计划</p>
                <span>
                    <template v-if="count.repayingCount!==0">{{count.repayingCount}}个还款中</template>
                    <template v-if="count.failCount!==0">{{count.failCount}}个还款失败</template>
                </span>

                <img src="../../assets/images/more.png" alt class="more">
            </div>
            <div class="content" @click="help()">
                <img src="../../assets/images/my/help.png" alt class="icon">
                <p>帮助反馈</p>
                <img src="../../assets/images/more.png" alt class="more">
            </div>
        </div>
           <div class="footer">
            <ul>
                <li @click="home()">
                    <img src="../../assets/images/home.png" alt="">
                    <p style="color:#A6A9B5">首页</p>
                </li>
                  <li @click="my()">
                    <img src="../../assets/images/myActive.png" alt="">
                    <p >我的</p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: "my",
    data() {
        return {
            msg: "",
            showlogin: false,
            accountName: "",
            phone: "",
            count: {}
        };
    },
    methods: {
        login() {
            this.$router.push({ name: "login" });
        },
        help() {
            this.$router.push({ name: "help" });
        },
        myBackPlan() {
            this.$router.push({ name: "mybackplan" });
            localStorage.setItem("tabKey", 1);
        },
        personinfo() {
            this.$router.push({ name: "personalInfo" });
        },
        tradeRecord() {
            this.$router.push({ name: "traderecord" });
        },
        mycard() {
            this.$router.push({ name: "mycard" });
        },
        home(){
            this.$router.push({ name: "home" });

        }
    },
    mounted() {
        if (localStorage.getItem("token") == undefined) {
            this.showlogin = true;
        } else {
            this.showlogin = false;
            this.accountName = localStorage.getItem("accountName");
            this.phone = localStorage.getItem("loginphone");
            this.phone = `${this.phone.substring(
                0,
                3
            )}****${this.phone.substring(this.phone.length - 3)}`;
        }

        this.axios({
            method: "post",
            url: `${
                this.siteUrl
            }/app/repay/getOrderCount?appid=web.2019&format=json&timestamp=${
                this.timestamp
            }`,
            data: {
                userId: localStorage.getItem("userId")
            }
        })
            .then(response => {
                console.log(response);
                if (response.data.success == 1) {
                    this.count = response.data.data;
                } else {
                    this.$toast(response.data.message);
                }
            })
            .catch(error => {
                console.log(error);
                this.$toast("连接服务器异常");
            });
    }
};
</script>

<!-- At "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con {
    width: 100%;
    min-height: 100vh;
    background: #f9f9f9;
}
.con .header {
    position: relative;
    background: #fff;
}
.con .header .bg {
    width: 100%;
}

.con .header .btn button {
    position: absolute;
    left: 50%;
    top: 22%;
    width: 30%;
    height: 20%;
    margin-left: -15%;
    border-radius: 25px;
    background: #fff;
    font-size: 16px;
    color: #ffae4e;
}
.con .header .personinfo dl {
    position: absolute;
    width: 90%;
    height: 44px;
    left: 5%;
    top: 47px;
    color: #fff;
    font-size: 16px;
}
.con .header .personinfo .head {
    width: 44px;
}
.con .header .personinfo dt {
    margin-left: 10px;
}
.con .header .personinfo dt span {
    color: #ffe3c2;
    font-size: 12px;
}
.con .header .personinfo dt img {
    width: 12px;
    vertical-align: -2px;
}
.con .header dl .more3 {
    position: absolute;
    top: 14px;
    right: 10px;
    width: 6px;
    height: 18px;
}
.nav {
    width: 100%;
    height: 77px;
    margin-top: -20px;
}
.nav li {
    float: left;
    width: 33.3%;
    text-align: center;
    height: 77px;
}
.nav li img {
    width: 44px;
    height: 44px;
}
.info {
    width: 100%;
    margin-top: 12px;
    background: #fff;
}
.info .content {
    width: 94%;
    margin-left: 3%;
    border-bottom: 1px solid #e9eaee;
    position: relative;
    height: 62px;
}
.info .content .icon {
    width: 20px;
    height: 20px;
    margin-top: 21px;
}
.info .content p {
    position: absolute;
    left: 30px;
    top: 21px;
    color: #2d3659;
}
.info .content span {
    position: absolute;
    color: #a6a9b5;
    right: 20px;
    top: 21px;
}
.info .content .more {
    position: absolute;
    right: 2px;
    top: 26px;
    width: 6px;
}
.info .content:last-child {
    border-bottom: none;
}

.con .footer{
    position: fixed;
    left: 0px;
    bottom: 0px;
    height: 50px;
    border-top:1px solid #ddd;
    width: 100%;
}
.con .footer ul li{
    width: 50%;
    float: left;
    text-align: center
}
.con .footer ul li img{
    width: 32px;
}
</style>
